<template>
  <div>
    <el-form style="margin-top: 10px" :model="form" ref="form" :rules="rules" label-width="80px" :inline="true">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="onSubmit">搜索</el-button>
        <el-button icon="el-icon-refresh">取消</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" style="padding: 5px">
      <el-col :span="1.5">
        <el-button type="primary" @click="UserAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger">删除</el-button>
      </el-col>
    </el-row>
    <section>
      <el-table :data="tableData" :span-method="objectSpanMethod" @select="checkSelection" @select-all="checkSelection"
        @selection-change="checkSelection" ref="checkTable" border size="mini" style="width: 100%;"
        :row-style="{ height: '3px' }" :cell-style="{ padding: '3px 0' }">
        <el-table-column type="selection"></el-table-column>
        <el-table-column fit="true" prop="id" label="ID"></el-table-column>
        <el-table-column fit="true" prop="name" label="姓名"></el-table-column>
        <el-table-column fit="true" prop="amount1" label="数值 1（元）" :width="100" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column fit="true" prop="amount1" label="数值 1（元）" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column fit="true" prop="amount1" label="数值 1（元）" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column fit="true" prop="amount1" label="数值 1（元）" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column fit="true" prop="amount1" label="数值 1（元）" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column fit="true" prop="amount2" label="数值 2（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <el-table-column fit="true" prop="amount3" label="数值 3（元）"></el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="">
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </section>
    <keep-alive>
      <component :is="dialogList.UserCreate" :option="dialogOptions" @refreshTable="checkUserList()"></component>
    </keep-alive>
  </div>
  <!--  -->
</template>

<script>
import UserCreate from "./dialog/UserCreate";
export default {
  name: "",
  data() {
    return {
      form: {
        name: ""
      },
      dialogOptions: {
        //新增
        dialogVisible: false
      },
      dialogList: {
        //指定被渲染组件列表
        UserCreate
      },
      rules: {},
      tableData: [
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1:
            "1651111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111",
          amount2: "4.43",
          amount3: 12
        },
        {
          id: "12987124",
          name: "王小虎",
          amount1: "324",
          amount2: "1.9",
          amount3: 9
        },
        {
          id: "12987124",
          name: "王小虎",
          amount1: "621",
          amount2: "2.2",
          amount3: 17
        },
        {
          id: "12987126",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15
        },
        {
          id: "12987126",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15
        },
        {
          id: "12987127",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15
        },
        {
          id: "12987128",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15
        },
        {
          id: "12987128",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15
        }
      ]
    };
  },
  created() {
    this.test = "测试";
  },
  mounted() {
    console.log(this.test);
  },
  computed: {},
  watch: {},
  methods: {
    onSubmit() { },
    UserAdd() {
      //改变创建用户的显示状态
      console.log("新增事件");
      this.dialogOptions.dialogVisible = true;
    },
    checkUserList() {
      console.log("回调checkUserList刷新数据");
    },
    objectSpanMethod() { },
    checkSelection() { }
  }
};
</script>
<style scoped></style>
